<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LimeReader - 专业长图处理工具 | ctdy123.com</title>
    <meta name="description" content="基于Qt 6开发的专业长图处理工具，支持智能分页、多栏布局、PDF整合、全局页码等功能。">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #1d1d1f;
            background: #ffffff;
            overflow-x: hidden;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="rgba(255,255,255,0.1)"/><stop offset="100%" stop-color="rgba(255,255,255,0)"/></radialGradient></defs><circle cx="200" cy="200" r="300" fill="url(%23a)"/><circle cx="800" cy="800" r="200" fill="url(%23a)"/></svg>') no-repeat center center;
            background-size: cover;
        }

        .hero-content {
            text-align: center;
            color: white;
            z-index: 2;
            max-width: 800px;
            padding: 0 20px;
        }

        .hero h1 {
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 1rem;
            letter-spacing: -0.02em;
            text-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        .hero-subtitle {
            font-size: 1.8rem;
            font-weight: 500;
            margin-bottom: 1rem;
            opacity: 0.95;
            line-height: 1.3;
        }

        .hero-description {
            font-size: 1.15rem;
            margin-bottom: 2.5rem;
            opacity: 0.85;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: rgba(255,255,255,0.2);
            color: white;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
        }

        .btn-primary:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .btn-secondary {
            background: white;
            color: #667eea;
        }

        .btn-secondary:hover {
            background: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* Features Section */
        .features {
            padding: 6rem 0;
            background: #f8f9fa;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section-title {
            text-align: center;
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #1d1d1f;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.2rem;
            color: #86868b;
            margin-bottom: 4rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
            margin-top: 4rem;
        }

        .feature-card {
            background: white;
            padding: 3rem 2rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 20px;
            margin: 0 auto 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
        }

        .feature-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1d1d1f;
        }

        .feature-description {
            color: #86868b;
            line-height: 1.6;
        }

        /* Screenshots Section */
        .screenshots {
            padding: 6rem 0;
            background: white;
        }

        .screenshot-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-top: 4rem;
        }

        .screenshot-item {
            background: #f8f9fa;
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .screenshot-item:hover {
            transform: scale(1.02);
        }

        .screenshot-placeholder {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: #1976d2;
            margin-bottom: 1rem;
        }

        .screenshot-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #1d1d1f;
        }

        /* Video Section */
        .video-section {
            padding: 6rem 0;
            background: #1d1d1f;
            color: white;
        }

        .video-container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .video-placeholder {
            width: 100%;
            height: 450px;
            background: linear-gradient(135deg, #333, #555);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 2rem 0;
            position: relative;
            overflow: hidden;
        }

        .play-button {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .play-button:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        /* Testimonials */
        .testimonials {
            padding: 6rem 0;
            background: #f8f9fa;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 4rem;
        }

        .testimonial-card {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            position: relative;
        }

        .testimonial-quote {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #1d1d1f;
            margin-bottom: 1.5rem;
            font-style: italic;
        }

        .testimonial-author {
            font-weight: 600;
            color: #667eea;
        }

        .testimonial-role {
            color: #86868b;
            font-size: 0.9rem;
        }

        /* Download Section */
        .download-section {
            padding: 6rem 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
        }

        .download-content {
            max-width: 600px;
            margin: 0 auto;
        }

        .download-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .download-description {
            font-size: 1.2rem;
            margin-bottom: 3rem;
            opacity: 0.9;
        }

        .download-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-download {
            background: white;
            color: #667eea;
            padding: 1.2rem 2.5rem;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .btn-download:hover {
            background: #f8f9fa;
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        /* Footer */
        .footer {
            background: #1d1d1f;
            color: white;
            padding: 3rem 0;
            text-align: center;
        }

        .footer-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: #86868b;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: white;
        }

        .footer-copyright {
            color: #86868b;
            font-size: 0.9rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .screenshot-grid {
                grid-template-columns: 1fr;
            }
            
            .testimonials-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Smooth scrolling */
        html {
            scroll-behavior: smooth;
        }

        /* Loading animation */
        .loading {
            opacity: 0;
            animation: fadeIn 0.8s ease forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        /* Floating elements */
        .floating {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content loading">
            <h1>LimeReader</h1>
            <p class="hero-subtitle">专业长图处理工具</p>
            <p class="hero-description">
                拖拽即用的长图处理专家。支持批量导入、智能分页、多栏排版。<br>
                整合PDF与图片文件，全局页码自动编排，DPI灵活可调。<br>
                让长图阅读与打印变得优雅高效。
            </p>
            <div class="cta-buttons">
                <a href="#download" class="btn btn-primary">
                    <span>📥</span> 立即下载
                </a>
                <a href="#features" class="btn btn-secondary">
                    <span>🔍</span> 了解更多
                </a>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features">
        <div class="container">
            <h2 class="section-title">六大核心优势</h2>
            <p class="section-subtitle">
                专为长图处理场景设计，每一个功能都体现专业与效率
            </p>
            
            <div class="features-grid">
                <div class="feature-card floating">
                    <div class="feature-icon">🚀</div>
                    <h3 class="feature-title">极致便捷的文件管理</h3>
                    <p class="feature-description">
                        支持拖拽多个文件或整个目录导入，自动识别图片和PDF。
                        内置去重检测，一键批量导出为单个PDF文件。
                        告别繁琐的文件操作，专注内容本身。
                    </p>
                </div>
                
                <div class="feature-card floating" style="animation-delay: 0.5s;">
                    <div class="feature-icon">📐</div>
                    <h3 class="feature-title">智能多栏排版</h3>
                    <p class="feature-description">
                        支持单栏、双栏、三栏布局自由切换。
                        自动优化页面排版，最大限度节省纸张成本。
                        2栏模式可节省50%打印用纸，3栏模式更可节省67%。
                    </p>
                </div>
                
                <div class="feature-card floating" style="animation-delay: 1s;">
                    <div class="feature-icon">🔄</div>
                    <h3 class="feature-title">灵活的顺序调整</h3>
                    <p class="feature-description">
                        支持拖拽排序和文件名自然排序。
                        内置智能排序算法，准确识别文件编号。
                        可随时调整文件顺序，实时预览排列效果。
                    </p>
                </div>
                
                <div class="feature-card floating" style="animation-delay: 1.5s;">
                    <div class="feature-icon">📚</div>
                    <h3 class="feature-title">PDF与图片整合</h3>
                    <p class="feature-description">
                        将多个PDF和图片文件整合为单一PDF文档。
                        全局页码连续编排，支持自定义起始页码。
                        页码格式和位置高度可定制，方便文档管理与查阅。
                    </p>
                </div>
                
                <div class="feature-card floating" style="animation-delay: 2s;">
                    <div class="feature-icon">⚙️</div>
                    <h3 class="feature-title">DPI自由定义</h3>
                    <p class="feature-description">
                        从150 DPI到600 DPI可自由设置。
                        快速模式（150 DPI）、标准模式（200 DPI）、高质量（300 DPI）、极致模式（600 DPI）。
                        根据用途智能选择：缓存生成、窗口渲染、PDF导出各有最优配置。
                    </p>
                </div>
                
                <div class="feature-card floating" style="animation-delay: 2.5s;">
                    <div class="feature-icon">🧠</div>
                    <h3 class="feature-title">智能分页算法</h3>
                    <p class="feature-description">
                        自动检测背景色和空白区域，寻找最佳分页点。
                        避免在文字或图像中间断开，确保内容完整性。
                        支持超长图片流式处理，突破内存限制。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Screenshots Section -->
    <section class="screenshots">
        <div class="container">
            <h2 class="section-title">产品截图</h2>
            <p class="section-subtitle">
                直观了解LimeReader的专业界面
            </p>
            
            <div class="screenshot-grid">
                <div class="screenshot-item">
                    <div class="screenshot-placeholder">
                        📱 拖拽导入
                    </div>
                    <h3 class="screenshot-title">拖拽导入文件</h3>
                    <p style="margin-top: 0.5rem; color: #86868b; font-size: 0.9rem;">
                        支持批量拖拽，自动识别文件类型
                    </p>
                </div>
                
                <div class="screenshot-item">
                    <div class="screenshot-placeholder">
                        📐 多栏布局
                    </div>
                    <h3 class="screenshot-title">智能多栏排版</h3>
                    <p style="margin-top: 0.5rem; color: #86868b; font-size: 0.9rem;">
                        单栏/双栏/三栏自由切换
                    </p>
                </div>
                
                <div class="screenshot-item">
                    <div class="screenshot-placeholder">
                        📚 全局页码
                    </div>
                    <h3 class="screenshot-title">全局页码系统</h3>
                    <p style="margin-top: 0.5rem; color: #86868b; font-size: 0.9rem;">
                        连续编排，位置与格式可调
                    </p>
                </div>
                
                <div class="screenshot-item">
                    <div class="screenshot-placeholder">
                        ⚙️ DPI配置
                    </div>
                    <h3 class="screenshot-title">DPI自定义设置</h3>
                    <p style="margin-top: 0.5rem; color: #86868b; font-size: 0.9rem;">
                        150-600 DPI灵活配置
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Video Section -->
    <section class="video-section">
        <div class="container">
            <h2 class="section-title" style="color: white;">产品演示</h2>
            <p class="section-subtitle" style="color: rgba(255,255,255,0.8);">
                3分钟了解LimeReader如何简化您的长图处理流程
            </p>
            
            <div class="video-container">
                <div class="video-placeholder">
                    <div class="play-button" onclick="openVideo()">
                        ▶️
                    </div>
                </div>
                <p style="margin-top: 1rem; opacity: 0.8;">
                    观看Bilibili演示视频：拖拽 → 排版 → 导出，三步完成
                </p>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="testimonials">
        <div class="container">
            <h2 class="section-title">适用场景</h2>
            <p class="section-subtitle">
                多种场景，一个工具解决
            </p>
            
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <p class="testimonial-quote">
                        "处理大量微信聊天记录截图时，LimeReader的批量拖拽功能让我省去了逐个添加的麻烦。智能分页确保对话不会在中间断开，全局页码让我快速定位关键证据。作为律师，这个工具大大提高了我的工作效率。"
                    </p>
                    <div class="testimonial-author">李律师</div>
                    <div class="testimonial-role">法律工作者 · 证据整理</div>
                </div>
                
                <div class="testimonial-card">
                    <p class="testimonial-quote">
                        "准备考研资料时，我收集了上百张思维导图和知识卡片的长截图。LimeReader的双栏布局功能特别棒，原本需要200页的资料，现在只需100页就能打印完。而且拖拽排序功能让我按章节重新组织内容变得很轻松。"
                    </p>
                    <div class="testimonial-author">张同学</div>
                    <div class="testimonial-role">研究生 · 学习资料整理</div>
                </div>
                
                <div class="testimonial-card">
                    <p class="testimonial-quote">
                        "作为技术文档翻译，我经常需要将网页长截图和PDF文档整合成一份完整的资料。LimeReader支持混合导入PDF和图片，自动生成连续页码，再也不用手动调整了。DPI可调功能让我根据客户需求输出不同质量的文档。"
                    </p>
                    <div class="testimonial-author">王译员</div>
                    <div class="testimonial-role">技术翻译 · 文档整合</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Download Section -->
    <section id="download" class="download-section">
        <div class="container">
            <div class="download-content">
                <h2 class="download-title">立即下载</h2>
                <p class="download-description">
                    专业长图处理工具，现在免费使用
                </p>
                <div class="download-buttons">
                    <a href="#" class="btn btn-download" onclick="downloadWindows()">
                        <span>🪟</span> Windows版本
                    </a>
                    <a href="#" class="btn btn-download" onclick="downloadMac()">
                        <span>🍎</span> macOS版本
                    </a>
                </div>
                <p style="margin-top: 2rem; opacity: 0.8; font-size: 0.9rem;">
                    支持Windows 7+ 和 macOS 10.14+ 系统<br>
                    基于Qt 6开发，高性能跨平台应用
                </p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-links">
                    <a href="https://ctdy123.com">首页</a>
                    <a href="https://ctdy123.com/products">产品</a>
                    <a href="https://ctdy123.com/about">关于我们</a>
                    <a href="https://ctdy123.com/contact">联系我们</a>
                </div>
                <div class="footer-copyright">
                    © 2024 ctdy123.com. 保留所有权利。
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Video functionality
        function openVideo() {
            // TODO: 替换为实际的Bilibili演示视频链接
            // 示例: window.open('https://www.bilibili.com/video/BV1xxxxxxxxx', '_blank');
            alert('Bilibili演示视频\n\n请在此处集成您的演示视频链接。\n建议包含：\n1. 拖拽多文件导入演示\n2. 多栏布局切换\n3. 拖拽排序操作\n4. 全局页码设置\n5. DPI配置\n6. 一键导出PDF');
        }

        // Download functionality
        function downloadWindows() {
            // TODO: 替换为实际的OSS下载链接
            // 示例: window.location.href = 'https://your-oss-domain.com/LimeReader-Windows-Latest.exe';
            alert('Windows版本下载链接\n\n请在此处集成您的OSS下载地址。\n例如：通过build_and_pack.bat生成的安装包上传到OSS后的链接。');
        }

        function downloadMac() {
            // TODO: 替换为实际的OSS下载链接
            // 示例: window.location.href = 'https://your-oss-domain.com/LimeReader-macOS-Latest.dmg';
            alert('macOS版本下载链接\n\n请在此处集成您的OSS下载地址。\n例如：通过build_dmg.sh生成的DMG包上传到OSS后的链接。');
        }

        // Add loading animation to elements as they come into view
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('loading');
                }
            });
        }, observerOptions);

        // Observe all feature cards and other elements
        document.querySelectorAll('.feature-card, .screenshot-item, .testimonial-card').forEach(el => {
            observer.observe(el);
        });

        // Add floating animation to hero elements
        window.addEventListener('load', () => {
            const heroElements = document.querySelectorAll('.hero-content > *');
            heroElements.forEach((el, index) => {
                el.style.animationDelay = `${index * 0.2}s`;
            });
        });
    </script>
</body>
</html>
